<template>
<el-container>
    <el-main>
        <el-card>
            <div style="padding: 2%;">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="用户昵称">
                        <el-input placeholder="请输入用户昵称" v-model="nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="status" placeholder="请选择">
                            <el-option v-for="item in statesList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="sex" placeholder="请选择">
                            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 查询按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="getData(currentPage,pageSize)">查询</el-button>
                    </el-form-item>
                    <!-- 添加按钮 -->
                    <el-form-item>
                        <el-button type="info" @click="add">添加用户</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table border stripe :data="tableData" style="width: 100%;">
                <el-table-column prop="id" align="center" label="用户编号"></el-table-column>
                <el-table-column prop="nickname" align="center" label="昵称"></el-table-column>
                <el-table-column prop="sex" align="center" label="性别">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.sex == '1'">男</el-tag>
                        <el-tag type="warning" v-if="scope.row.sex == '2'">女</el-tag>
                        <el-tag type="info" v-if="scope.row.sex == '3'">未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
                <el-table-column prop="birthday" align="center" label="出生年月"></el-table-column>
                <el-table-column prop="avatar" align="center" label="头像">
                    <template slot-scope="scope">
                        <el-avatar shape="circle" fit="contain" size="large" :src="scope.row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == '1'">启用</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == '0'">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
                        <el-button size="small" type="warning" @click="change(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-pagination background style="margin-top: 10px" align="right" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize" @current-change="getAllUsers" :total="total">
            </el-pagination>
            <!-- 删除模态框 -->
            <div class="dct_camera">
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                    <span>确定要删除吗？</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button @click="deleteByid" type="primary">确 定</el-button>
                    </span>
                </el-dialog>
            </div>

            <!-- 编辑模态框 -->
            <div class="dct_camera">
                <el-dialog title="用户" :visible.sync="dialogVisible1" width="30%" :before-close="cancel">
                    <!-- 模态框主体 -->
                    <el-form label-width="80px" label-position="left">

                        <!-- 手机号 -->
                        <el-form-item label="手机号">
                            <el-input placeholder="手机号" v-model="user.phone" />
                        </el-form-item>

                        <!-- 密码 -->
                        <el-form-item label="密码" v-show="!user.id">
                            <el-input placeholder="密码" v-model="user.password"/>
                        </el-form-item>

                        <!-- 昵称 -->
                        <el-form-item label="昵称">
                            <el-input placeholder="请输入昵称" v-model="user.nickname" />
                        </el-form-item>

                        <!-- 性别 -->
                        <el-form-item label="性别">
                            <el-select v-model="user.sex" placeholder="请选择">
                                <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- 状态 -->
                        <el-form-item label="状态">
                            <el-select v-model="user.status" placeholder="请选择">
                                <el-option v-for="item in statesList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 上传 -->
                        <el-form-item>
                            <el-upload class="avatar-uploader" action="http://localhost:8081/blog/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">

                                <img v-if="user.avatar" :src="user.avatar" class="avatar">

                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>

                        </el-form-item>

                        <!-- 出生年月 -->
                        <el-form-item label="出生年月">
                            <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <!-- 个人简介 -->
                        <el-form-item label="个人简介">
                            <el-input placeholder="输入个人简介" v-model="user.profile" />
                        </el-form-item>
                        <!-- 按钮 -->
                        <div style="text-align:right;">
                            <el-button type="danger" @click="cancel">取消</el-button>
                            <el-button type="primary" @click="submitChange()">提交</el-button>
                        </div>
                    </el-form>
                </el-dialog>
            </div>
        </el-card>
    </el-main>
</el-container>
</template>

<script>
// 在Vue中如何使用JS对象->在Vue中导入module有几种方式
// 导入UserAPI对象
// 关于JS import 的几种方式
// 1 默认导入
// 2 方法导入：当一个JS文件中存在多个函数导出时，需要以{}的形式将所需导入的函数封装成一个集合，集合内元素名称就是函数名称，无需加括号，即可在本文件直接通过函数名去调用
import {
    getAllUser,
    queryData,
    addOrUpdateUser,
    getUserById,
	deletUserById
} from '@/api/user'
export default {
    name: 'index',
    inject: ['reload'],
    data() {
        return {
            params: {},
            user: {
                avatar: '',
                nickname: "",
                password: '',
                status: 1,
                sex: 1,
                birthday: '',
                phone: '',
                id: null,
                profile: ''
            },
            nickname: "",
            status: null,
            sex: null,
            statesList: [{
                    label: '禁用',
                    value: 0
                },
                {
                    label: '可用',
                    value: 1
                },
            ],
            sexList: [{
                    label: '男',
                    value: 1
                },
                {
                    label: '女',
                    value: 2
                },
                {
                    label: '未知',
                    value: 3
                },
            ],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            dialogVisible: false,
            dialogVisible1: false,
            fid: 0,
            name: "",
            tableData: [{
                    id: 1,
                    newName: '图片1',
                    oldName: '1',
                    filePath: '',
                    createTime: '2021/10/24'
                },
                {
                    id: 2,
                    newName: '图片2',
                    oldName: '1',
                    filePath: '',
                    createTime: '2021/10/24'
                }
            ]
        };
    },
    created() {
        this.getAllUsers()
    },
    methods: {
        getAllUsers() {
            getAllUser(this.currentPage, this.pageSize).then(resp => {
                this.tableData = resp.data.list
                // 更新分页数据
                this.total = resp.data.total,
                    this.currentPage = resp.data.currentPage
                this.pageSize = resp.data.pageSize
                //页面刷新
                //this.reload()
            })
        },

        getData() {
            // 获取分页数据
            this.params.nickname = this.nickname
            this.params.status = this.status
            this.params.sex = this.sex
            queryData(this.params, this.currentPage, this.pageSize).then(resp => {
                console.log(resp.data);
                this.tableData = resp.data.list
                // 更新分页数据
                this.total = resp.data.total,
                    this.currentPage = resp.data.currentPage
                this.pageSize = resp.data.pageSize
            })
        },
        add() {
            // 显示添加模态框
            this.dialogVisible1 = true
        },
        // 上传图片之后的操作
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.imageUrl = res.msg;
            // 为data中的user绑定数据
            this.user.avatar = res.msg
        },
        // 在上传图片之前对文件的预先处理
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPGh或png 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 获取后台的用户信息并显示编辑框
        change(id) {
            // 提交异步请求,获取用户信息
            getUserById(id).then(res => {
                console.log(res)
                this.user={...res.data}
				this.user.id=res.data.id
				console.log(this.user.id);
				
				this.dialogVisible1=true
            })
        },
        // 提交表单
        submitChange() {
            if (this.user.phone.length != 11) {
                this.$message.error('手机号不合法');
                return
            }
            if (this.user.password.length < 6) {
                this.$message.error('密码太过简单');
                return
            }
            // 校验通过，提交异步请求
            addOrUpdateUser(this.user).then(res => {
                console.log(res)
                if (res.code == 20000) {
                    this.$message.success('操作成功');
                    this.reload()
                }

            })
        },
		// 取消提交
		cancel(){
			this.user.id=null
			this.user.nickname=''
			this.user.password=''
			this.user.phone=''
			this.user.sex=1
			this.user.status=1
			this.user.profile=''
			this.user.avatar=''
			this.user.birthday=''
			this.dialogVisible1=false
		},

        del(id) {
            this.dialogVisible = true
            this.id = id

        },

        deleteByid() {

            deletUserById(this.id).then(resp => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.reload()
                this.dialogVisible = false
            })
        },

    }
}
</script>

<style>
avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
